<!-- 该画面是维护项目维护画面中的一个子画面，用于创建或更新维护项目信息。 -->
<template>
  <el-dialog
    :visible.sync="openSheet"
    width="1200px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :before-close="cancel"
    append-to-body
  >
    <!-- 项目报价单信息：开始 -->
    <projectquota-info :project-quota-information="projectQuotaInformation" />
    <!-- 项目报价单信息：结束 -->
    <br>
    <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('quoteNo')" prop="quote_no" :error="error.quote_no">
            <el-input v-model="form.quote_no" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('projectMaintainName')" prop="project_name" :error="error.project_name">
            <el-input v-model="form.project_name" maxlength="50" show-word-limit :placeholder="$t('inputprojectMaintainName')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainOrderNo')" prop="order_no" :error="error.order_no">
            <el-input v-model="form.order_no" maxlength="10" show-word-limit :placeholder="$t('inputprojectMaintainOrderNo')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainSalesDate')" prop="sales_date" :error="error.sales_date">
            <el-date-picker v-model="form.sales_date" type="date" value-format="yyyy-MM-dd" :placeholder="$t('inputprojectMaintainSalesDate')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainSalesAmount')" prop="sales_amount" :error="error.sales_amount">
            <el-input v-model="form.sales_amount" :placeholder="$t('inputprojectMaintainSalesAmount')" @change="handleSalesAmountChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainObj')" prop="procurement_obj" :error="error.procurement_obj">
            <el-popover placement="bottom-start" content="预定销售金额*20%">
              <template #reference>
                <el-input v-model="form.procurement_obj" :placeholder="$t('inputprojectMaintainObj')" />
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainaffect')" prop="procurement_affect" :error="error.procurement_affect">
            <el-input v-model="form.procurement_affect" :placeholder="$t('inputprojectMaintainaffect')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainEstimate')" prop="Maintain_estimates" :error="error.Maintain_estimates">
            <el-input v-model="form.Maintain_estimates" :placeholder="$t('inputprojectMaintainEstimate')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainQuoteDays')" prop="quoted_days" :error="error.quoted_days">
            <el-popover content="报价工时/8" placement="bottom-start">
              <template #reference>
                <el-input v-model="form.quoted_days" :placeholder="$t('inputprojectMaintainQuoteDays')" />
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainQuoteHours')" prop="quoted_hours" :error="error.quoted_hours">
            <el-popover content="预定销售金额/300" placement="bottom-start">
              <template #reference>
                <el-input v-model="form.quoted_hours" :placeholder="$t('inputprojectMaintainQuoteHours')" />
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainBudgetHours')" prop="bugdget_hours" :error="error.bugdget_hours">
            <el-popover content="报价工时*0.7" placement="bottom-start" effect="light">
              <template #reference>
                <el-input v-model="form.bugdget_hours" :placeholder="$t('inputprojectMaintainBudgetHours')" />
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('projectMaintainReserveHours')" prop="reserve_hours" :error="error.reserve_hours">
            <el-popover content="报价工时 - 预算工时" placement="bottom-start" effect="light">
              <template #reference>
                <el-input v-model="form.reserve_hours" :placeholder="$t('inputprojectMaintainReserveHours')" />
              </template>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('projectMaintainNote')" prop="note" :error="error.note">
            <el-input v-model="form.note" maxlength="150" show-word-limit :placeholder="$t('inputprojectMaintainNote')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{ $t('update') }}</el-button>
      <el-button @click="cancel">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { splitProjectMaintainApi } from '../api/projectmaintain.api';
import { getProjectQutaListApi } from '@/views/project/projectquota/api/projectquota.api';
import projectquotaInfo from '@/views/project/projectquota/components/projectquota-info.vue';

export default {
  components: { projectquotaInfo },
  data() {
    return {
      formRef: 'form',
      openSheet: false,
      createTitle: this.$t('projectMaintainCreateTitle'),
      updateTitle: this.$t('projectMaintainUpdateTitle'),
      quoteOption: [],
      AllquoteOption: [],
      projectPlanId: 0,
      projectQuotaInformation: {},
      form: {
        projectPlanFK: undefined,
        quoteFK: undefined,
        project_name: undefined,
        order_no: undefined,
        sales_date: undefined,
        sales_amount: undefined,
        procurement_obj: undefined,
        procurement_affect: undefined,
        Maintain_estimates: undefined,
        quoted_days: undefined,
        quoted_hours: undefined,
        bugdget_hours: undefined,
        reserve_hours: undefined,
        note: undefined
      },
      error: {
        projectPlanFK: undefined,
        quoteFK: undefined,
        project_name: undefined,
        order_no: undefined,
        sales_date: undefined,
        sales_amount: undefined,
        procurement_obj: undefined,
        procurement_affect: undefined,
        Maintain_estimates: undefined,
        quoted_days: undefined,
        quoted_hours: undefined,
        bugdget_hours: undefined,
        reserve_hours: undefined,
        note: undefined
      },
      rules: {
        project_name: [{ required: true, message: this.$t('projectMaintainNameisRequired'), trigger: 'blur' }],
        order_no: [{ required: true, message: this.$t('projectMaintainorderNoisRequired'), trigger: 'blur' }],
        sales_amount: [{ required: true, message: this.$t('projectMaintainSalesAmountRequired'), trigger: 'blur' }],
        procurement_obj: [{ required: true, message: this.$t('projectMiantainObjRequired'), trigger: 'blur' }],
        quoted_days: [{ required: true, message: this.$t('projectMaintainQuoteDaysRequired'), trigger: 'blur' }],
        quoted_hours: [{ required: true, message: this.$t('projectMaintainQuoteHoursRequired'), trigger: 'blur' }],
        bugdget_hours: [{ required: true, message: this.$t('projectMaintainBudgetHoursRequired'), trigger: 'blur' }],
        reserve_hours: [{ required: true, message: this.$t('projectMaintainReserveHoursRequired'), trigger: 'blur' }]
      }
    };
  },
  computed: {
    labelWidth() {
      return this.$i18n.locale === 'en' ? '150px' : '110px';
    }
  },
  methods: {
    openSheetDialog(data, maintaindata) {
      console.log(maintaindata)
      this.openSheet = !this.openSheet;
      this.reset();
      // this.initialize();
      if (maintaindata) {
        this.title = this.updateTitle;
        this.form.quote_no = maintaindata.quote_no
        this.form.quoteFK = maintaindata.quoteFK;
        this.form.projectPlanFK = maintaindata.projectPlanFK;
        this.maintainid = maintaindata.id;
        this.getQuoteById(this.form.quoteFK)
      }
      this.projectPlanId = data.id;
    },
    reset() {
      this.resetForm('form');
      this.resetJsonObject(this.form);
      this.projectQuotaInformation = {}
    },
    cancel() {
      this.openSheet = !this.openSheet;
    },
    initialize() {
      // this.getQuoteData()
    },
    // 通过报价单ID获取对应数据
    async getQuoteById(query) {
      var resp = await getProjectQutaListApi({ id: query, page: 1, page_size: 20 })
      if (resp.success) {
        const list = resp.data.results;
        this.projectQuotaInformation = { ...list[0] }
      } else {
        this.projectQuotaInformation = {};
      }
    },
    // 计算采购管理对象、报价工时、报价天数、预算工时、预算预备工时
    handleSalesAmountChange() {
      if (this.form.sales_amount) {
        this.form.procurement_obj = (this.form.sales_amount * 0.2).toFixed(2);
        this.form.quoted_hours = (this.form.sales_amount / 300).toFixed(2);
        this.form.quoted_days = (this.form.quoted_hours / 8).toFixed(1);
        this.form.bugdget_hours = (this.form.quoted_hours * 0.7).toFixed(2);
        this.form.reserve_hours = (this.form.quoted_hours - this.form.bugdget_hours).toFixed(2);
        this.form.procurement_affect = 0
        this.form.Maintain_estimates = 0
      }
    },
    submitForm: function() {
      this.$refs['form'].validate(async(Valid) => {
        if (Valid) {
          this.resetJsonObject(this.error);
          var Resp = await splitProjectMaintainApi(this.maintainid, this.form);
          if (Resp.success) {
            this.$emit('refreshList');
            this.cancel();
            this.targaMessage(
              this.$t('updateSuccess', {
                title: this.$t('projectMaintainOrderNo'),
                value: this.form.order_no
              })
            );
          } else {
            if (typeof Resp.msg === 'object') {
              this.error = Resp.msg;
            } else {
              this.targaMessageBox(this, Resp.msg);
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>

</style>
